<template>
  <div>
    <div>
      <span style="font-size: 20">新产品</span> <span>{{form.productname}}</span>
      <br />
      <br />
      <span>创建人：{{ form.creatorUserId==1?"张三":"李四" }}</span><span>创建时间：{{ form.creationTime }}</span><span>更新人：{{ form.creatorUserId==1?"张三":"李四" }}</span
      ><span>更新时间：2023-12-12</span>
      <br />
      <br />
      <br />
    </div>
    <div>
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
      <el-button>启用</el-button>
      <el-button>禁用</el-button>
      <el-button>打印</el-button>
    </div>
    <br />
    <div>
      <el-form :model="form.value" label-width="120px">
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品编号">
                <!-- <el-input v-model="form.productid"></el-input> -->
                <span>{{ form.productid }}</span>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="产品名称">
                <span>{{ form.productname }}</span>
                <!-- <el-input v-model="form.productname"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="规格型号">
                <span>{{ form.specification }}</span>
                <!-- <el-input v-model="form.specification"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="单位">
                <span>{{ form.units }}</span>
                <!-- <el-input v-model="form.units"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品类型">
                <span>{{ form.producttype }}</span>
                <!-- <el-input v-model="form.producttype"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="产品属性">
                <span>{{ form.productproperty }}</span>
                <!-- <el-input v-model="form.productproperty"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品分类">
                <span>{{ form.classname }}</span>
                <!-- <el-input v-model="form.classname"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="状态">
                <span>{{ form.state }}</span>
                <!-- <el-input v-model="form.state"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="有效期">
                <span>{{ form.periodofvalidity }}</span>
               <!-- <el-input v-model="form.periodofvalidity"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="报警天数">
                <span>{{ form.numberday }}</span>
                <!-- <el-input v-model="form.numberday"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="库存上限">
                <span>{{ form.inventoryceiling }}</span>
                <!-- <el-input v-model="form.inventoryceiling"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="库存下限">
                <span>{{ form.stockfloor }}</span>
                <!-- <el-input v-model="form.stockfloor"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="采购价格">
                <span>{{ form.purchaseprice }}</span>
                <!-- <el-input v-model="form.purchaseprice"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="销售价格">
                <span>{{ form.saleprice }}</span>
                <!-- <el-input v-model="form.saleprice"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-form-item label="备注">
          
          <span>{{ form.remark }}</span>
          <!-- <el-input v-model="form.remark"></el-input> -->
        </el-form-item>
      </el-form>
    </div>
    <div>
      <p>图片</p>
      <el-image v-for="(a,index) in images" style="margin-right: 20px; width: 100px;height: 100px;" :key="index" :src="a.filepath"></el-image>
      <p>附件</p>
      <p v-for="(a,index) in attachment" :key="index">{{ a.filepath }}</p>
    </div>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { ProductSelect } from "../../api/product";
export default {
  setup() {
    const form = ref({
      classname: "",
      date: "",
      inventoryceiling: null,
      numberday: null,
      periodofvalidity: null,
      classname: null,
      productid: "",
      productname: "",
      producttype: "",
      producttype: "",
      purchaseprice: null,
      remark: "",
      saleprice: null,
      specification: "",
      state: null,
      stockfloor: null,
      units: "",
    });
    const route = useRoute();
    const selectId = ref(0);
    const Data = reactive({});
    const images=ref([]);
    const attachment=ref([])
    const getData = () => {
      selectId.value = route.query.id;
      ProductSelect(selectId.value).then((res) => {
        form.value = res.result.data;
        Data.value = res.result.data;
        res.result.data.images.forEach(element => {
          images.value.push({
            filepath:"http://127.0.0.1:9000/auditattachments/"+element.filepath
          })
        });
        res.result.data.attachment.forEach(element => {
          attachment.value.push({
            filepath:element.filepath
          })
        });
      });
    };
    getData();
    return {
      form,
      route,
      selectId,
      Data,
      images,
      attachment,
      getData
    };
  },
};
</script>
